<template>
  <div class="contant">
      <div class="left">
        <el-form ref="loginForm" :model="loginForm" label-width="80px" 
        style="
        display: flex; 
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: auto 0;
        ">
          <i class="fa fa-ravelry" aria-hidden="true"></i>
          <p class="p1">welcome</p>
          <p class="p2">开放式实验室管理系统</p>
          <p class="p3">Open laboratory management system</p>
        </el-form>
      </div>
    <el-card class="box-card" style="margin: auto auto auto 0 ;border: none;border-radius: 0;">
      <div slot="header" class="clearfix">
        <span>首次登录，请输入以下信息</span>
      </div>
      <div>
        <el-form ref="loginForm" :model="loginForm" label-width="80px">
          <el-form-item label="重置密码" >
            <el-input v-model="loginForm.password" placeholder="请输入密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" >
            <el-input v-model="loginForm.password2" placeholder="请确认密码" show-password ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" >
            <el-input v-model="loginForm.userTel" placeholder="请输入手机号码" suffix-icon="el-icon-mobile-phone" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tologin" style="background-color: #B6AEE1;border-color: #B6AEE1">确认</el-button>
            <button class="reset" type="reset">重置</button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
  
</template>

<script>
export default {
  name:'FirstLogin',
  data() {
    return {
      loginForm: {
        userTel: "",
        password: "",
        password2:''
      }
    };
  },
  methods: {
    tologin() {
        if (this.loginForm.userTel=='') {
            alert('电话号码不能为空!');
            return;
        }
        if (this.loginForm.password=='') {
            alert('密码不能为空!');
            return;
        }
        this.$router.go(-1)
      axios
        .get("/getUsersByNameByPass", {
          params: this.loginForm
        })
        .then(response => {
          let users = response.data;
          if (users != null) {
            setSessionStorage("users", users);
            this.$router.push("/index");
          } else {
            alert("用户名或密码错误");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
  }
};
</script>

<style scoped>
.contant{
  background-image: url(../assets/图片1.png);
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
  
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.left{
  margin: auto 0 auto auto ;
  border-radius: 0;
  border: none;
  width: 445px;
  height: 308.6px;
  padding: 20px;
  background-color: rgba(255,255, 255, 0.3);
}
i{
  font-size: 30px;
  color: white;
  padding: 50px 0 0;
}
p{
  color: white;
  z-index: 1;
  font-size: 30px;
  padding: 10px 0;
}
.p1{
  font-size: 22px;
}
.p3{
  font-size: 14px;
}
.reset{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    margin-left: 30px;
}
.reset:focus, .reset:hover {
    color: #409EFF;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
</style>